/**
 * 轻量级 Toast 提示工具
 * 用于替代 alert 和 confirm
 */

type ToastType = 'success' | 'error' | 'warning' | 'info'

interface ToastOptions {
  duration?: number
  type?: ToastType
  onClose?: () => void
}

interface ConfirmOptions {
  title?: string
  message: string
  confirmText?: string
  cancelText?: string
  onConfirm: () => void
  onCancel?: () => void
}

class ToastManager {
  private container: HTMLDivElement | null = null

  private ensureContainer() {
    if (!this.container) {
      this.container = document.createElement('div')
      this.container.className = 'toast-container'
      this.container.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        gap: 10px;
        pointer-events: none;
      `
      document.body.appendChild(this.container)
    }
    return this.container
  }

  show(message: string, options: ToastOptions = {}) {
    const { duration = 3000, type = 'info', onClose } = options
    const container = this.ensureContainer()

    const toast = document.createElement('div')
    toast.className = `toast toast-${type}`

    const colors = {
      success: '#10b981',
      error: '#ef4444',
      warning: '#f59e0b',
      info: '#3b82f6',
    }

    toast.style.cssText = `
      background: white;
      padding: 12px 20px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      border-left: 4px solid ${colors[type]};
      min-width: 250px;
      max-width: 400px;
      pointer-events: auto;
      animation: slideIn 0.3s ease-out;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: #333;
    `

    const icons = {
      success: '✓',
      error: '✕',
      warning: '⚠',
      info: 'ℹ',
    }

    toast.innerHTML = `
      <span style="
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: ${colors[type]};
        color: white;
        font-weight: bold;
        font-size: 12px;
      ">${icons[type]}</span>
      <span style="flex: 1;">${message}</span>
    `

    container.appendChild(toast)

    // 添加动画样式
    if (!document.getElementById('toast-animations')) {
      const style = document.createElement('style')
      style.id = 'toast-animations'
      style.textContent = `
        @keyframes slideIn {
          from {
            transform: translateX(100%);
            opacity: 0;
          }
          to {
            transform: translateX(0);
            opacity: 1;
          }
        }
        @keyframes slideOut {
          from {
            transform: translateX(0);
            opacity: 1;
          }
          to {
            transform: translateX(100%);
            opacity: 0;
          }
        }
      `
      document.head.appendChild(style)
    }

    // 自动移除
    setTimeout(() => {
      toast.style.animation = 'slideOut 0.3s ease-out'
      setTimeout(() => {
        container.removeChild(toast)
        onClose?.()
        // 如果容器为空，移除容器
        if (container.children.length === 0) {
          document.body.removeChild(container)
          this.container = null
        }
      }, 300)
    }, duration)
  }

  success(message: string, duration?: number) {
    this.show(message, { type: 'success', duration })
  }

  error(message: string, duration?: number) {
    this.show(message, { type: 'error', duration })
  }

  warning(message: string, duration?: number) {
    this.show(message, { type: 'warning', duration })
  }

  info(message: string, duration?: number) {
    this.show(message, { type: 'info', duration })
  }

  confirm(options: ConfirmOptions) {
    const {
      title = '确认操作',
      message,
      confirmText = '确定',
      cancelText = '取消',
      onConfirm,
      onCancel,
    } = options

    const overlay = document.createElement('div')
    overlay.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: fadeIn 0.2s ease-out;
    `

    const modal = document.createElement('div')
    modal.style.cssText = `
      background: white;
      border-radius: 12px;
      padding: 24px;
      min-width: 320px;
      max-width: 480px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
      animation: scaleIn 0.2s ease-out;
    `

    modal.innerHTML = `
      <h3 style="margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: #333;">${title}</h3>
      <p style="margin: 0 0 24px 0; font-size: 14px; color: #666; line-height: 1.6;">${message}</p>
      <div style="display: flex; gap: 12px; justify-content: flex-end;">
        <button class="toast-cancel-btn" style="
          padding: 8px 20px;
          border: 1px solid #d1d5db;
          background: white;
          border-radius: 6px;
          cursor: pointer;
          font-size: 14px;
          color: #666;
          transition: all 0.2s;
        ">${cancelText}</button>
        <button class="toast-confirm-btn" style="
          padding: 8px 20px;
          border: none;
          background: #ef4444;
          color: white;
          border-radius: 6px;
          cursor: pointer;
          font-size: 14px;
          font-weight: 500;
          transition: all 0.2s;
        ">${confirmText}</button>
      </div>
    `

    // 添加动画
    if (!document.getElementById('modal-animations')) {
      const style = document.createElement('style')
      style.id = 'modal-animations'
      style.textContent = `
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes scaleIn {
          from {
            transform: scale(0.9);
            opacity: 0;
          }
          to {
            transform: scale(1);
            opacity: 1;
          }
        }
        .toast-cancel-btn:hover {
          background: #f3f4f6 !important;
        }
        .toast-confirm-btn:hover {
          background: #dc2626 !important;
        }
      `
      document.head.appendChild(style)
    }

    const close = () => {
      overlay.style.animation = 'fadeIn 0.2s ease-out reverse'
      setTimeout(() => {
        document.body.removeChild(overlay)
      }, 200)
    }

    const cancelBtn = modal.querySelector('.toast-cancel-btn') as HTMLButtonElement
    const confirmBtn = modal.querySelector('.toast-confirm-btn') as HTMLButtonElement

    cancelBtn.addEventListener('click', () => {
      close()
      onCancel?.()
    })

    confirmBtn.addEventListener('click', () => {
      close()
      onConfirm()
    })

    overlay.addEventListener('click', e => {
      if (e.target === overlay) {
        close()
        onCancel?.()
      }
    })

    overlay.appendChild(modal)
    document.body.appendChild(overlay)
  }
}

// 导出单例
export const toast = new ToastManager()
